<template>
  <div class="row1" v-show="!Dheader.header.row2.isSubpageFullScreen">
    <div class="col" id="DheaderR1C1">
      <div
        v-show="
          Daside.aside.settings.mode == 1 &&
          !Daside.aside.settings.isSmallMenuState
        "
      >
        <el-icon :size="20" @click="Dheader.row1DasideDisplay()"
          ><IEpExpand v-if="Daside.aside.isCollapse"></IEpExpand
          ><IEpFold v-else></IEpFold
        ></el-icon>
      </div>
      <el-breadcrumb
        :separator-icon="Ship"
        v-show="Daside.aside.settings.mode == 1"
      >
        <el-breadcrumb-item
          @click="Dheader.header.row1.path.length = 0"
          to="/home"
          >{{ $t("menu.home") }}</el-breadcrumb-item
        >
        <transition-group
          enter-active-class="animate__animated animate__fadeInRight animate__delay-1s"
          leave-active-class="animate__animated animate__fadeOut "
          appear
        >
          <el-breadcrumb-item
            v-for="item in Dheader.header.row1.path"
            :key="item"
          >
            {{ $t(item.title) }}
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>

    <div class="col">
      <div class="message">
        <el-popover
          placement="bottom"
          :width="300"
          trigger="click"
          content="this is content, this is content, this is content"
        >
          <template #reference>
            <el-icon :size="20"> <IEpBell></IEpBell></el-icon>
          </template>

          <el-tabs v-model="Dheader.header.row1.activeTag" class="messageTabs">
            <el-tab-pane name="schedule"
              ><template #label>{{ $t("header.row1.schedule") }}</template
              >待办事项</el-tab-pane
            >
            <el-tab-pane name="notification"
              ><template #label>{{ $t("header.row1.notification") }}</template>
              消息通知</el-tab-pane
            >
            <el-tab-pane label="留言提醒" name="message"
              ><template #label>{{ $t("header.row1.message") }}</template>
              留言提醒</el-tab-pane
            >
          </el-tabs>
        </el-popover>
      </div>
      <div class="languageSwitching" @click="Dheader.row1LanguageSwitch()">
        <svg
          v-if="Dheader.header.row1.isLanguageSwitch"
          t="1658243830181"
          class="icon"
          viewBox="0 0 1070 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
        >
          <path
            d="M232.582 358.133c12.288 36.33 32.59 67.851 60.905 95.633 24.042-26.18 42.207-58.235 53.96-95.633H232.583z"
            p-id="2908"
            fill="#333333"
          ></path>
          <path
            d="M981.615 143.36H532.836L507.192 6.055H90.468C44.522 6.055 7.123 43.453 7.123 89.4v708.43c0 45.946 37.399 83.344 83.345 83.344h379.86l-30.453 137.305h541.74c45.947 0 83.345-37.398 83.345-83.344v-708.43c0-45.947-37.398-83.345-83.345-83.345zM415.833 564.358c-49.152-18.165-89.756-41.139-122.346-67.852-34.192 30.453-76.933 52.892-126.62 66.783l-17.096-28.316c48.618-12.822 89.222-32.055 121.277-59.303-33.124-33.658-56.097-72.66-68.92-117.003h-46.48v-32.056h121.277c-7.48-13.89-17.096-27.247-28.316-40.07l32.056-11.753c11.22 14.425 21.37 31.522 30.453 51.29h115.935v32.055h-46.481c-14.96 45.946-36.33 84.413-64.646 115.4 31.522 25.11 71.057 45.947 117.538 63.043l-17.631 27.782zM1023.288 934.6c0 22.974-18.7 41.673-41.673 41.673H492.232l20.837-95.633h156.538l-89.222-497.397-0.534 2.671-3.74-19.767 1.069 0.534-32.59-181.649h437.56c22.973 0 41.672 18.7 41.672 41.673V934.6z"
            p-id="2909"
            fill="#333333"
          ></path>
          <path
            d="M684.566 541.384h114.866v-30.453H684.566v-60.905h122.346v-30.453H648.771V638.62h162.95v-30.453H684.565v-66.783zM924.45 475.67c-9.616 0-18.164 1.603-26.178 5.877-7.48 3.74-14.96 9.617-20.837 17.096v-18.699h-34.727V638.62h34.727v-95.633c1.069-12.822 5.343-22.439 12.823-29.384 6.41-5.877 13.89-9.083 22.439-9.083 24.041 0 35.795 12.823 35.795 39.001v94.565h34.727v-97.77c1.069-43.275-19.233-64.646-58.769-64.646z"
            p-id="2910"
            fill="#333333"
          ></path>
        </svg>

        <svg
          v-else
          t="1658244150010"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3772"
          width="20"
          height="20"
        >
          <path
            d="M579.584 478.208h-9.728l37.376 207.872c24.576-8.704 47.104-22.016 67.072-39.424-20.48-24.576-36.864-52.224-49.664-81.408l39.424-5.12c10.752 22.016 23.04 41.984 37.376 58.88 29.184-35.328 51.2-82.432 67.072-141.312l-188.928 0.512z m148.992 168.448c22.528 19.456 48.128 33.792 76.8 42.496l17.92 5.632-10.752 38.4-17.92-5.632c-34.304-10.752-66.048-28.672-93.184-52.736-25.088 22.528-54.784 39.936-87.04 50.688l25.088 140.288H489.984l-19.968 91.648H939.52c22.016 0 39.936-17.92 39.936-39.936V238.592c0-22.016-17.92-39.936-39.936-39.936H520.192l31.232 174.08-1.024-0.512 3.584 18.944 0.512-2.56 8.704 49.664h96.768v-39.936h74.752v39.936h124.928v39.936h-52.224c-17.408 70.144-44.032 126.464-78.848 168.448zM449.024 865.28H84.992c-44.032 0-79.872-35.84-79.872-79.872v-678.4c0-44.544 35.84-79.872 79.872-79.872h399.36l24.576 131.584h430.08c44.032 0 79.872 35.84 79.872 79.872v678.912c0 44.032-35.84 79.872-79.872 79.872H420.352l28.672-132.096z m-188.416-307.2v-41.984H181.76v-61.952h73.216v-41.472H181.76v-52.736h78.848v-41.472H135.68V558.08h124.928z m192.512 0V438.272c0-21.504-5.12-38.4-14.848-50.176-9.728-11.776-24.576-17.408-44.032-17.408-11.264 0-21.504 2.048-30.208 6.656s-15.872 11.776-20.48 20.48h-2.56l-6.144-23.552h-34.816V558.08h45.056v-86.528c0-21.504 3.072-36.864 8.704-46.592 5.632-9.216 14.848-13.824 27.648-13.824 9.216 0 15.872 3.072 20.48 9.728 4.096 6.656 6.656 16.384 6.656 29.696v107.52h44.544z"
            fill="#333333"
          ></path>
        </svg>
      </div>
      <div class="fullScreen" @click="Dheader.fullScreen(0)" id="fullScreen">
        <el-icon :size="20"
          ><IAntDesignFullscreenExitOutlined
            v-if="Dheader.header.row1.isFullScreen"
          ></IAntDesignFullscreenExitOutlined
          ><IAntDesignFullscreenOutlined v-else></IAntDesignFullscreenOutlined
        ></el-icon>
      </div>
      <div class="siteSettings" @click="Dheader.row1SettingsDisplay()">
        <el-icon :size="20"
          ><ICarbonTaskSettings></ICarbonTaskSettings
        ></el-icon>
      </div>
      <div
        class="avatar"
        @click.prevent.stop="
          Dheader.header.row1.isFold = !Dheader.header.row1.isFold
        "
        id="item"
      >
        <el-avatar shape="circle" :size="30" fit="fill" src="/img/Avatar.jpg" />
        <span>{{ Dheader.header.row1.personalCenter.personal.petName }}</span>
        <div
          :class="Dheader.header.row1.isFold ? 'item1' : 'item1 unfold1'"
          id="item1"
          @click.stop="Dheader.row1Logout()"
        >
          <el-icon :size="20"><IEpSwitchButton></IEpSwitchButton></el-icon>
        </div>
        <div
          :class="Dheader.header.row1.isFold ? 'item2' : 'item2 unfold2'"
          id="item2"
        >
          <el-icon :size="20"><IEpShare /></el-icon>
        </div>
        <div
          :class="Dheader.header.row1.isFold ? 'item3' : 'item3 unfold3'"
          id="item3"
          @click.stop="
            Dheader.header.row1.personalCenter.ispersonalCenterDisplay = true
          "
        >
          <el-icon :size="20"
            ><ICarbonUserProfile></ICarbonUserProfile
          ></el-icon>
        </div>
      </div>

      <el-drawer
        v-model="Dheader.header.row1.personalCenter.ispersonalCenterDisplay"
        direction="rtl"
        size="400px"
        ><template #header="{ titleId, titleClass }">
          <h2 :id="titleId">
            {{ $t("header.row1.personalCenter.default") }}
          </h2>
        </template>
        <el-card class="card">
          <el-tabs
            class="tabs"
            stretch
            v-if="Dheader.header.row1.personalCenter.isModify"
          >
            <el-tab-pane>
              <template #label>
                <div class="tabs-label">
                  <el-icon><IEpCalendar></IEpCalendar></el-icon>
                  <span
                    >{{ $t("header.row1.personalCenter.modify.basic") }}
                  </span>
                </div>
              </template>
              <el-form
                label-width="80px"
                :model="Dheader.header.row1.personalCenter.personalForm"
              >
                <el-form-item>
                  <template #label>
                    {{ $t("header.row1.personalCenter.personal.petName") }}
                  </template>
                  <el-input
                    v-model="
                      Dheader.header.row1.personalCenter.personalForm.petName
                    "
                  />
                </el-form-item>
                <el-form-item>
                  <template #label>
                    {{ $t("header.row1.personalCenter.personal.userName") }}
                  </template>
                  <el-input
                    v-model="
                      Dheader.header.row1.personalCenter.personalForm.userName
                    "
                  />
                </el-form-item>
                <el-form-item>
                  <template #label>
                    {{ $t("header.row1.personalCenter.personal.sex.default") }}
                  </template>
                  <el-radio-group
                    v-model="
                      Dheader.header.row1.personalCenter.personalForm.sex
                    "
                  >
                    <el-radio label="1">{{
                      $t("header.row1.personalCenter.personal.sex.male")
                    }}</el-radio>
                    <el-radio label="0">{{
                      $t("header.row1.personalCenter.personal.sex.female")
                    }}</el-radio>
                  </el-radio-group> </el-form-item
                ><el-form-item>
                  <template #label>
                    {{ $t("header.row1.personalCenter.personal.work") }}
                  </template>
                  <el-input
                    v-model="
                      Dheader.header.row1.personalCenter.personalForm.work
                    "
                  />
                </el-form-item>
                <el-form-item>
                  <template #label>
                    {{ $t("header.row1.personalCenter.personal.location") }}
                  </template>
                  <el-cascader
                    v-model="
                      Dheader.header.row1.personalCenter.personalForm.location
                    "
                    :options="
                      Dheader.header.row1.personalCenter.localtionSelector
                        .options
                    "
                    :props="
                      Dheader.header.row1.personalCenter.localtionSelector.props
                    "
                    :placeholder="
                      Dheader.header.row1.isLanguageSwitch
                        ? '请选择省/市/区'
                        : 'select province/city/district'
                    "
                    filterable
                    :filter-method="
                      (node: any, key: String) => {
                        return Dheader.row1Search(node, key);
                      }
                    "
                    clearable
                    ><template #empty>{{
                      Dheader.header.row1.isLanguageSwitch
                        ? "没有匹配的数据"
                        : "No matching data"
                    }}</template></el-cascader
                  >
                </el-form-item>
                <el-form-item>
                  <template #label>
                    {{ $t("header.row1.personalCenter.personal.stack") }}
                  </template>
                  <el-input
                    v-model="
                      Dheader.header.row1.personalCenter.personalForm.stack
                    "
                  />
                </el-form-item>
                <el-form-item
                  ><template #label>
                    {{ $t("header.row1.personalCenter.personal.tags") }}
                  </template>
                  <div class="tag">
                    <ul>
                      <li
                        v-for="item in Dheader.header.row1.personalCenter
                          .personalForm.tags"
                        :key="item"
                      >
                        <el-tag
                          :type="item.type"
                          closable
                          :disable-transitions="false"
                          @close="Dheader.deleteTag(item)"
                          >{{ item.tagName }}</el-tag
                        >
                      </li>
                      <li>
                        <el-input
                          v-if="
                            Dheader.header.row1.personalCenter.tag
                              .isInputDisplay
                          "
                          ref="InputRef"
                          v-model="
                            Dheader.header.row1.personalCenter.tag.tagName
                          "
                          size="small"
                          autofocus
                          clearable
                          @keyup.enter="Dheader.addTag()"
                          @blur="Dheader.addTag()"
                        />
                        <el-button
                          v-else
                          size="small"
                          @click="
                            Dheader.header.row1.personalCenter.tag.isInputDisplay = true
                          "
                        >
                          + {{ $t("default.newTag") }}
                        </el-button>
                      </li>
                    </ul>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="Dheader.row1SaveOrCancel(1)"
                  >
                    {{ $t("default.save") }}
                  </el-button>
                  <el-button @click="Dheader.row1SaveOrCancel(0)">
                    {{ $t("default.cancel") }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="Config">
              <template #label>
                <div class="tabs-label">
                  <el-icon><ICarbonContentView></ICarbonContentView></el-icon>
                  <span>{{
                    $t("header.row1.personalCenter.modify.binding")
                  }}</span>
                </div> </template
              >carbon:content-view</el-tab-pane
            >
          </el-tabs>
          <div class="information" v-else>
            <el-descriptions :column="1" border>
              <template #title>
                <el-avatar
                  shape="circle"
                  :size="100"
                  fit="fill"
                  src="/img/Avatar.jpg"
                  @dblclick="Dheader.row1Modify()"
                />
                <span class="title">{{
                  Dheader.header.row1.personalCenter.personal.petName
                }}</span>
              </template>
              <el-descriptions-item>
                <template #label>
                  <div>
                    <el-icon
                      ><IAntDesignUserOutlined></IAntDesignUserOutlined></el-icon
                    >{{ $t("header.row1.personalCenter.personal.petName") }}
                  </div></template
                >
                {{
                  Dheader.header.row1.personalCenter.personal.petName
                }}</el-descriptions-item
              >
              <el-descriptions-item>
                <template #label
                  ><div>
                    <el-icon><ICarbonUserAdmin></ICarbonUserAdmin></el-icon
                    >{{ $t("header.row1.personalCenter.personal.userName") }}
                  </div></template
                >{{
                  Dheader.header.row1.personalCenter.personal.userName
                }}</el-descriptions-item
              >
              <el-descriptions-item
                ><template #label
                  ><div>
                    <el-icon
                      ><IEpMale
                        v-if="
                          Number(
                            Dheader.header.row1.personalCenter.personal.sex
                          )
                        "
                      ></IEpMale
                      ><IEpFemale v-else></IEpFemale
                    ></el-icon>
                    {{ $t("header.row1.personalCenter.personal.sex.default") }}
                  </div></template
                >{{
                  Number(Dheader.header.row1.personalCenter.personal.sex)
                    ? $t("header.row1.personalCenter.personal.sex.male")
                    : $t("header.row1.personalCenter.personal.sex.female")
                }}</el-descriptions-item
              >
              <el-descriptions-item>
                <template #label
                  ><div>
                    <el-icon><IEpOfficeBuilding></IEpOfficeBuilding></el-icon>
                    {{ $t("header.row1.personalCenter.personal.work") }}
                  </div>
                </template>
                {{ Dheader.header.row1.personalCenter.personal.work }}
              </el-descriptions-item>
              <el-descriptions-item
                ><template #label
                  ><div>
                    <el-icon><IEpLocation></IEpLocation></el-icon>
                    {{ $t("header.row1.personalCenter.personal.location") }}
                  </div>
                </template>
                {{ Dheader.getLocaltion }} </el-descriptions-item
              ><el-descriptions-item
                ><template #label
                  ><div>
                    <el-icon><ICarbonCode></ICarbonCode></el-icon>
                    {{ $t("header.row1.personalCenter.personal.stack") }}
                  </div>
                </template>
                {{ Dheader.header.row1.personalCenter.personal.stack }}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <div class="tag">
              <span>
                {{ $t("header.row1.personalCenter.personal.tags") }}
              </span>
              <ul>
                <li
                  v-for="item in Dheader.header.row1.personalCenter.personal
                    .tags"
                >
                  <el-tag :type="item.type">{{ item.tagName }}</el-tag>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-drawer>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  // name: "row1",
};
</script>
<script lang="ts" setup>
import { useDheader } from "../../store/Dheader";
import { useDaside } from "../../store/Daside";
import { Ship } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const Dheader = useDheader();
const Daside = useDaside();
const router = useRouter();
Dheader.$subscribe((mutation: any, state) => {
  //切换语言
  state.header.row1.isLanguageSwitch
    ? (() => {
        locale.value = "zh";

        //修改页面的title
        window.document.title = t(
          `menu${router.currentRoute.value.path.split("/").join(".")}`
        );

        sessionStorage.setItem("lang", "zh");
      })()
    : (() => {
        locale.value = "en";
        window.document.title = t(
          `menu${router.currentRoute.value.path.split("/").join(".")}`
        );
        sessionStorage.setItem("lang", "en");
      })();
  if (!state.header.row1.personalCenter.ispersonalCenterDisplay)
    Dheader.row1SaveOrCancel(0);
});

//遮罩层事件
const maskClick = (event: any) => {
  var e = event || window.event;
  e.preventDefault();
  e.stopPropagation();
  Daside.aside.isMask = false;
  Daside.aside.settings.isSettingsHide = true;
};
//钩子事件操作
onBeforeMount(() => {
  Dheader.header.row1.isFullScreen = false;
});
onMounted(() => {
  //初始化事件绑定
  Dheader.initEvent();
  document.getElementById("mask")!.addEventListener("click", maskClick);
});
onBeforeUnmount(() => {
  document.getElementById("mask")!.removeEventListener("click", maskClick);
});
</script>

<style lang="scss" scoped>
.row1 {
  display: flex;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgb(230, 221, 221);
  .col:first-child {
    min-width: 0px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    user-select: none;
    .el-icon {
      display: flex;
      justify-content: center;
      margin-left: 5px;
      transition: color 0.5s;
      &:hover {
        color: rgb(63, 145, 183);
      }
    }
    .el-breadcrumb {
      margin: 2px 0px 0px 10px;
      font-size: 14px;
    }
  }
  .col:last-child {
    display: flex;
    align-items: center;
    min-width: 250px;
    & > * {
      flex: 1;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        background-color: rgba(212, 211, 211, 0.5);
        cursor: pointer;
      }
    }

    .avatar {
      position: relative;
      flex: 2;
      user-select: none;

      span {
        font-size: 5px;
      }

      @for $i from 1 through 3 {
        .item#{$i} {
          width: 35px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: none;

          position: absolute;
          left: 15px;
          top: 8px;
          z-index: 2;

          opacity: 0;
          border-radius: 50%;
          background-color: #fff;
          border: 1px solid rgb(190, 172, 227);
          transition: all 0.5s ease;
          transition-delay: 0.1s * ($i - 1);
        }
      }
      .unfold1 {
        left: -40px;
        opacity: 1;
        pointer-events: all;
      }
      .unfold2 {
        top: 40px;
        left: -10px;
        opacity: 1;
        pointer-events: all;
      }
      .unfold3 {
        top: 55px;
        left: 35px;
        opacity: 1;
        pointer-events: all;
      }
    }
    :deep(.el-drawer) {
      .el-drawer__header {
        padding: 0px;
        margin: 0px;
      }
      .el-drawer__body {
        scrollbar-width: none;
        &::-webkit-scrollbar {
          display: none;
        } //隐藏滚动条
      }
      .card {
        min-width: 340px;
        height: max-content;
        display: flex;
        justify-content: center;
        //隐藏滚动条

        .information {
          .el-avatar {
            margin-top: -20px;
            user-select: none;
          }
          .el-descriptions {
            min-width: 300px;

            .title {
              width: 300px;
              display: flex;
              justify-content: center;
              user-select: none;
            }

            .is-bordered-label {
              width: 50px;
              border: 0px;
              background: #fff;
              font-weight: bold;
              div {
                display: flex;
                align-items: center;
                white-space: nowrap;
                user-select: none;
              }
            }
            .is-bordered-content {
              border: 0px;
            }
          }
          .el-divider {
            width: 300px;
          }
        }
        .tabs {
          min-width: 340px;
          margin-top: -60px;
          .tabs-label {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .el-tab-pane {
            &:first-child {
              .el-form {
                padding-right: 20px;
                .el-cascader {
                  width: 100%;
                }
              }
            }
          }
        }
      }
      .tag {
        ul {
          display: flex;
          flex-wrap: wrap;
          list-style: none;
          li {
            width: fit-content;
            margin-left: 10px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>
